<template>
  <el-rate
    v-model="rateValue"
    v-bind="$attrs"
    :max="max"
    :allow-half="allowHalf"
    :size="size"
    :disabled="disabled"
    :show-text="showText"
    :texts="texts"
    :colors="colors"
    @change="handleChange"
  />
</template>

<script setup>
import { computed } from 'vue'
import { ElRate } from 'element-plus'

const props = defineProps({
  modelValue: Number,
  max: {
    type: Number,
    default: 5
  },
  allowHalf: Boolean,
  size: String,
  disabled: Boolean,
  showText: Boolean,
  texts: {
    type: Array,
    default: () => []
  },
  colors: {
    type: [Array, Object],
    default: () => []
  }
})

const emit = defineEmits(['update:modelValue', 'change'])

const rateValue = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})

const handleChange = (value) => {
  emit('change', value)
}
</script>